<template>
  <div class="activity">
    <div class="left
    ">
      <ul>
        <li v-for="(item, index) in navlist" class="active" @click="item.callback('')" :key="index">
          <NuxtImg :src="item.img" alt="" />
          <span>{{ $t(item.lang) }}</span>
        </li>
      </ul>
      <dl>
        <dd v-for="(item, index) in starimg"  :key="index"
          :style="{ backgroundColor: !loading ? 'rgb(61, 64, 72)' : '' }">
          <Skeleton :loading="false">
            <template #ske>
              <div style="width: 100%;">
                <el-skeleton-item variant="image" style="width: 100%; height: 180px;border-radius: 10px;" />
                <el-skeleton-item variant="text" style="width: 40%; height: 40px; margin-top: 10px" />
              </div>
            </template>
            <template #main>
              <img :src="item.img" alt="" />
              <div class="text">{{ $t(item.lang) }}</div>
            </template>
          </Skeleton>
        </dd>
      </dl>
    </div>
    <dl>
      <dd v-for="(item, index) in starimg" @click="$openPage('/StarDetail')" :key="index"
        :style="{ backgroundColor: !loading ? 'rgb(61, 64, 72)' : '' }">
        <Skeleton :loading="false">
          <template #ske>
            <div style="width: 100%;">
              <el-skeleton-item variant="image" style="width: 100%; height: 180px;border-radius: 10px;" />
              <el-skeleton-item variant="text" style="width: 40%; height: 40px; margin-top: 10px" />
            </div>
          </template>
          <template #main>
            <NuxtImg :src="item.img" alt="" />
            <div class="text">{{ $t(item.lang) }}</div>
          </template>
        </Skeleton>
      </dd>
    </dl>
  </div>
</template>
<script setup lang="ts">

import { reactive, nextTick, onMounted, ref, shallowReactive, shallowRef } from "vue";
let loading = shallowRef<boolean>(true);
let navlist = reactive<{ img: string, lang: string, callback: Function }[]>([{
  img: "/img/all.png",
  lang: "language.Star.all",
  callback: (url: string) => {
    // activeRouter.value = url
    navigateTo(url)
  }
}])
onMounted(() => {
  nextTick(() => {
    loading.value = false;
    // let time = setInterval(() => {
    //   loading.value = false;
    //   clearInterval(time);
    // }, 500);
  });
});
let starimg = reactive<{ lang: string, img: string }[]>([
  {
    img: "/img/h1.jpg",
    lang: "language.Star.title1",
  },
  {
    img: "/img/h2.png",
    lang: "language.Star.title2",
  },
  {
    img: "/img/h3.jpg",
    lang: "language.Star.title3",
  },
  {
    img: "/img/h4.jpg",
    lang: "language.Star.title4",
  },
  {
    img: "/img/h5.jpg",
    lang: "language.Star.title5",
  },
  {
    img: "/img/h6.jpg",
    lang: "language.Star.title6",
  },
  {
    img: "/img/h7.jpg",
    lang: "language.Star.title7",
  },
  {
    img: "/img/h8.jpg",
    lang: "language.Star.title8",
  },
]);
</script>
<style scoped lang="scss">
.activity {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  @include flex(row, flex-start, flex-start);

  .left {
    width: 17%;
    height: 100%;
    margin-right: 5px;
    border-radius: 10px;
    background-color: #242628;
    position: relative;

    ul {
      position: absolute;
      top: 20px;
      left: 0;
      width: 100%;
      @include flex(row, flex-start, flex-start);

      li+li {
        margin-top: 15px;
      }

      .active {
        border-left: 4px solid #0a906c;

        span {
          color: #0a906c;
        }
      }

      li {
        width: 100%;
        padding: 10px 20px 10px 40px;
        @include flex(row, flex-start, center);
        border-left: 4px solid transparent;
        cursor: pointer;

        &:hover {
          border-left: 4px solid #0a906c;

          span {
            color: #0a906c;
          }
        }

        img {
          width: 26px;
          margin-right: 20px;
        }

        span {
          color: #b5bac8;
        }
      }
    }

    dl {
      border-radius: 10px;
      background-color: #242628;
      width: 100%;
      padding: 35px 0 40px;
      visibility: hidden;

      @include flex(row, space-between, flex-start);
      flex-wrap: wrap;

      dd {
        width: 49%;
        border-radius: 20px;
        @include flex(column, flex-start, center);

        height: 230px;

        img {
          width: 100%;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
        }

        .text {
          height: 50px;
          line-height: 50px;
          width: 100%;
          text-align: left;
          color: #fff;
          font-size: 16px;
          padding: 0 10px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          background-color: rgb(61, 64, 72);
        }
      }

      dd {
        margin-bottom: 20px;
      }
    }

  }


  >dl {
    border-radius: 10px;
    background-color: #242628;
    flex: 1;
    padding: 35px 40px 40px;

    @include flex(row, space-between, flex-start);
    flex-wrap: wrap;

    dd {
      width: 49%;
      border-radius: 20px;
      @include flex(column, flex-start, center);
      cursor: pointer;
      height: 230px;

      img {
        width: 100%;
        height: 180px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }

      .text {
        height: 50px;
        line-height: 50px;
        width: 100%;
        text-align: left;
        color: #fff;
        font-size: 16px;
        padding: 0 10px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: rgb(61, 64, 72);
      }
    }

    dd {
      margin-bottom: 20px;
    }
  }
}
</style>